<template>
  <div class="list-box all-list-box"  @touchstart="touchStart($event)" @touchend="touchEnd($event)"> 
    <div class="tab-nav">
      <div :class="{'active' : tabIdx == 1 }" @click="toggleMessage('1')">未读</div>
      <div :class="{'active' : tabIdx == 2 }" @click="toggleMessage('2')">已读</div>
    </div>
    <blockquote v-show="tabIdx == 1">
      <div v-for="(item,index) in messagelist" :key="index" class="message-item " @click="goDetail(index)">
        <div class="message-header">
          <div :class="'message-type' + item.type">{{ item.type == 2 ? '库存预警' : item.type == 3 ? "订单消息" : "通知" }}</div>
          <div class="message-time">{{item.addTime}}</div>
        </div>
        <div class="message-content">
          {{item.content}}
        </div>
      </div>
      <nodata v-if="!messagelist || messagelist.length==0" />
    </blockquote>
    
    <blockquote v-show="tabIdx == 2">
      <div v-for="(item,index) in readMessagelist" :key="index" class="message-item read-message-item" @click="goDetail(index)">
        <div class="message-header">
          <div :class="'message-type' + item.type">{{ item.type == 2 ? '库存预警' : item.type == 3 ? "订单消息" : "通知" }}</div>
          <div class="message-time">{{item.addTime}}</div>
        </div>
        <div class="message-content">
          {{item.content}}
        </div>
      </div>
      <nodata v-if="!readMessagelist || readMessagelist.length==0" />
    </blockquote>
  </div>

</template>

<script>
import row from '@/components/row'
import nodata from '@/components/nodata'
import api from '@/api/api.js' 
export default { 
  components: {
    row,
    nodata
  },
  data () {
    return {
      filterObj:{
        pageNum:1,
        pageSize:10,
        totalPage:0,
      },
      readFilter:{
        pageNum:1,
        pageSize:10,
        totalPage:0,
      },
      tabIdx:1,
      messagelist:[  ], //未读
      readMessagelist:[], //已读
    }
  },
  mounted () {
    this.filterObj.pageNum = 1;
    this.getList();
  },
  filters: {
     
  },
  methods: {
    goDetail(idx){
      let obj ={};
      if(this.tabIdx == 1){
        obj = this.messagelist[idx];
        api.messageMng.setRead({
          messageId:obj.id
        },res=>{ 
           this.$store.dispatch('getMessageNum'); 
        }) 
      }else if(this.tabIdx == 2){
        obj = this.readMessagelist[idx];
      } 
      // this.$store.commit("setMessageDetail",list[idx]);
      // this.$router.push('/messageDetail');
       
      //补库存 不同身份 可能跳转至不同页面
      if(obj.type == 2){
        if(JSON.parse(localStorage.hj_userInfo).storeType ==1){
          this.$router.replace({path:'/shopkeeperStockList', query:{id: this.$store.state.myStoreId}});
          return
        }
        this.$router.push({path:"/stockIndex"})
      }else if(obj.type == 3){ 
        this.$router.push({path:"/purchaseOrderDetail", query:{id: JSON.parse(obj.extr).orderId} });
      }
    },
    getList(){ 
      api.messageMng.messageList({
        pageNum:this.filterObj.pageNum,
        pageSize:this.filterObj.pageSize,
      },res=>{ 
        this.messagelist=this.filterObj.pageNum == 1 ? res.result.data : this.messagelist.concat(res.result.data);
        this.filterObj.totalPage = res.result.totalPage
      }) 
    },
     touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop;  
        if (scrollTop + clientHeight >= scrollHeight -60) { //下拉到底了
          this.doLoadMore()  
        } 
    },
    toggleMessage(idx){
      this.tabIdx=idx;
      if(idx==2){
        if(this.readFilter.pageNum==1){
          this.getReadingList();
        }
        
      }
    },
    getReadingList(){
      api.messageMng.getReadList({
        pageNum:this.readFilter.pageNum,
        pageSize:this.readFilter.pageSize,
      },res=>{ 
        this.readMessagelist = this.readFilter.pageNum == 1 ? res.result.data : this.messagelist.concat(res.result.data);
        this.readFilter.totalPage = res.result.totalPage
      }) 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() {  
      if(this.tabIdx == 1){
        if(this.filterObj.pageNum < this.filterObj.totalPage){
          ++this.filterObj.pageNum;
          this.getList()
        }
        return
      }else{
        if(this.readFilter.pageNum < this.readFilter.totalPage){
          ++this.readFilter.pageNum;
          this.getReadingList()
        }
        return
      } 
    }, 

  }
}
</script>
<style lang="less" scoped>
  .list-box{
    min-height: 100vh;
    background: #f5f5f5;
    padding: 50px 15px;

  }
  .message-item{
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .tab-nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    color: #999;
    background: #fff;
    z-index: 3;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    &>div{
      flex: 1;
      line-height: 40px;
      text-align: center;
      position: relative;
      &.active{
        color: #333;
        font-weight: 600;
        &::before{
          content: '';
          position: absolute;
          width: 16%;
          left: 42%;
          height: 3px;
          border-radius: 2px;
          background: #FABE00;
          bottom: 0;
        }
      }
    }
  }
  .message-header{
    display: flex;
    justify-content: space-between;
    height: 42px;
    align-items: center;
    padding: 0 12px;
  }
  .message-type1{
    color: chocolate;
  }
  .message-type2{
    color: darkblue;
  }
  .message-type3{
    color: #FABE00;
  }
  .message-content{
    padding: 12px;
    
    color: #666;
    position: relative;
    &::before{
      content: '';
      top: 0;
      left: 12px;
      right: 0;
      height: 1px;
      background: #eee;
      position: absolute;
    }
  }
  
  .message-time{
    color: #999;
  }
  .read-message-item{
    background: #fdfefd;
  }
</style>